<template>
	<div class="orderDetails navBar">
		<!-- <van-count-down :time="time"  format="HH:mm:ss" millisecond /> -->
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" @click-right="changeType">
			<template #right>
				<div class="type">
					<span>{{type}}</span>
					<div id="sjx"></div>
				</div>
			</template>
		</van-nav-bar>

		<van-tabs v-if="type == '出售'" v-model="sell_active" title-active-color="#94E9FF" title-inactive-color="#3A627E"
		 sticky swipeable animated color="#94E9FF" background="rgb(17,32,55)">
			<van-tab title="待匹配">

				<div v-if="sell_info.dpplist <= 0" style="text-align: center;padding-top: 2rem;">
					<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
				</div>
				<div class="sell_dpp_item" v-for="item,index in sell_info.dpplist" :key="index">
					<div>
						<span>数量：{{item.num}}</span>
						<span>出售价：{{item.rmb}}</span>
					</div>
					<div>
						<span>
							发售时间：{{item.creat_time}}
						</span>
						<span class="chexiao" @click="cancelOrder(item.id,index)">撤销</span>
					</div>
				</div>

			</van-tab>
			<van-tab title="待买家付款">
				<div v-if="sell_info.dfklist <= 0" style="text-align: center;padding-top: 2rem;">
					<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
				</div>
				<div class="sell_dfk_item" v-for="item,index in sell_info.dfklist" :key="index">
					<div class="sdi_left">
						<img src="../../assets/user/user_head.png" alt="">
						<div>买家</div>
					</div>
					<div class="sell_dpp_item">
						<div>
							<span>ID：{{item.sellmobile}}</span>
							<van-count-down :time="item.djsc *1000"  format="HH:mm:ss" millisecond />
						</div>
						<div>
							<span>
								等级：{{item.sellvip}}
							</span>
							<span>付款倒计时</span>
						</div>

						<div class="sdi_bottom">
							<span>数量：{{item.num}}</span>
							<span class="chexiao off">待买家付款</span>
						</div>
						<div>
							<span>
								总价：{{item.rmb}}
							</span>
							<span class="ysk">已收到款？确定收款</span>
						</div>
					</div>

				</div>
			</van-tab>
			<van-tab title="待确认收款">
				<div v-if="sell_info.qrfklist <= 0" style="text-align: center;padding-top: 2rem;">
					<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
				</div>

				<div class="sell_dfk_item" v-for="item,index in sell_info.qrfklist" :key="index">
					<div class="sdi_left">
						<img src="../../assets/user/user_head.png" alt="">
						<div>买家</div>
					</div>
					<div class="sell_dpp_item">
						<div>
							<span>ID：{{item.sellmobile}}</span>
							<van-count-down :time="item.djsc *1000"  format="HH:mm:ss" millisecond />
						</div>
						<div>
							<span>
								等级：{{item.sellvip}}
							</span>
							<span>收款倒计时</span>
						</div>

						<div class="sdi_bottom">
							<span>数量：{{item.num}}</span>
							<span class="chexiao" @click="openFind(item.pic,item.id,index,'sell')">查看凭证</span>
						</div>
						<div>
							总价：{{item.rmb}}
						</div>
					</div>

				</div>
			</van-tab>
			<van-tab title="已完成">
				<div v-if="sell_info.wclist <= 0" style="text-align: center;padding-top: 2rem;">
					<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
				</div>

				<div class="sell_dfk_item" v-for="item,index in sell_info.wclist" :key="index">
					<div class="sdi_left">
						<img src="../../assets/user/user_head.png" alt="">
						<div>买家</div>
					</div>
					<div class="sell_dpp_item">
						<div>
							<span>ID：{{item.sellmobile}}</span>
							<span>{{item.over_time1}}</span>
						</div>
						<div>
							<span>
								等级：{{item.sellvip}}
							</span>
							<span @click="$router.push('/kefu')">订单有误？申请申诉</span>
						</div>
						<div class="sdi_bottom">
							数量：{{item.num}}
						</div>
						<div style="margin-bottom: 0.08rem;">
							总价：{{item.rmb}}CNY
						</div>
						<div style="margin-bottom: 0.08rem;">
							交易订单号：{{item.ddh}}
						</div>
					</div>

				</div>
			</van-tab>
		</van-tabs>

		<van-tabs v-if="type == '购买'" v-model="buy_active" title-active-color="#94E9FF" title-inactive-color="#3A627E" sticky
		 swipeable animated color="#94E9FF" background="rgb(17,32,55)">
			<van-tab title="待付款">
				<div v-if="buy_info.dfklist <= 0" style="text-align: center;padding-top: 2rem;">
					<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
				</div>

				<div class="sell_dfk_item" v-for="item,index in buy_info.dfklist" :key="index">
					<div class="sdi_left">
						<img src="../../assets/user/user_head.png" alt="">
						<div>买家</div>
					</div>
					<div class="sell_dpp_item">
						<div>
							<span>ID：{{item.sellmobile}}</span>
							<van-count-down :time="item.djsc *1000"  format="HH:mm:ss" millisecond />
						</div>
						<div>
							<span>
								等级：{{item.sellvip}}
							</span>
							<span>收款倒计时</span>
						</div>

						<div class="sdi_bottom">
							<span>数量：{{item.num}}BTS</span>
							<div>
								<span class="chexiao chexiaoS" @click="openShou(item.id)">查看收款码</span>
								<span class="chexiao" @click="openShang(item.id,index)">上传凭证</span>
							</div>
						</div>
						<div>
							总价：{{item.rmb}}CNY
						</div>
					</div>

				</div>
			</van-tab>
			<van-tab title="待卖家收款">
				<div v-if="buy_info.qrfklist <= 0" style="text-align: center;padding-top: 2rem;">
					<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
				</div>
				
				<div class="sell_dfk_item" v-for="item,index in buy_info.qrfklist" :key="index">
					<div class="sdi_left">
						<img src="../../assets/user/user_head.png" alt="">
						<div>买家</div>
					</div>
					<div class="sell_dpp_item">
						<div>
							<span>ID：{{item.sellmobile}}</span>
							<van-count-down :time="item.djsc *1000"  format="HH:mm:ss" millisecond />
						</div>
						<div>
							<span>
								等级：{{item.sellvip}}
							</span>
							<span>收款倒计时</span>
						</div>
				
						<div class="sdi_bottom">
							<span>数量：{{item.num}}</span>
							<span class="chexiao" @click="openFind(item.pic,item.id,index,'buy')">查看凭证</span>
						</div>
						<div>
							总价：{{item.rmb}}
						</div>
					</div>
				
				</div>
			</van-tab>
			<van-tab title="已完成">
				<div v-if="buy_info.wclist <= 0" style="text-align: center;padding-top: 2rem;">
					<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
				</div>
				
				<div class="sell_dfk_item" v-for="item,index in buy_info.wclist" :key="index">
					<div class="sdi_left">
						<img src="../../assets/user/user_head.png" alt="">
						<div>买家</div>
					</div>
					<div class="sell_dpp_item">
						<div>
							<span>ID：{{item.sellmobile}}</span>
							<span>{{item.over_time1}}</span>
						</div>
						<div>
							<span>
								等级：{{item.sellvip}}
							</span>
							<span @click="$router.push('/kefu')">订单有误？申请申诉</span>
						</div>
						<div class="sdi_bottom">
							数量：{{item.num}}
						</div>
						<div style="margin-bottom: 0.08rem;">
							总价：{{item.rmb}}CNY
						</div>
						<div style="margin-bottom: 0.08rem;">
							交易订单号：{{item.ddh}}
						</div>
					</div>
				
				</div>
			</van-tab>
		</van-tabs>

		<van-popup v-model="showPicker" position="bottom">
			<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
		</van-popup>
		
		<!-- 查看凭证弹窗 -->
		<van-popup v-model="pingzheng">
			<div class="find_PZ">
				<p class="title">查看凭证</p>

				<img :src=" 'http://www.facai888008.cn'+ qr_data.pz_pic" alt="">

				<div v-if="qr_data.type == 'sell'">
					<span>未收到款？请求申诉</span>
					<button @click="confirmCollection()">确定收款</button>
				</div>

				<p class="bottom">*请仔细核对收款是否到账</p>
				<p class="bottom">确定收款后BTS币即自动转入买家账户</p>
			</div>
		</van-popup>

		<!-- 上传凭证 -->
		<div class="upload_pingPop">
			<van-popup v-model="shangShow">
				<div class="upload_ping">
					<p>上传凭证</p>
					<div class="upload_div" v-if="!shangPZ_data.url">

						支付交易凭证，如：微信支付宝转账截图、银行转账打款截图、单据照片等。
						<img src="../../assets/user/add_cm.png" alt="">

						<input @change="upload($event)" accept="image/*" type="file">
					</div>
					<img class="upload_div_img" v-if="shangPZ_data.url" :src=" 'http://www.facai888008.cn' + shangPZ_data.url" alt="">
					<div class="upload_btn" @click="confirmPing">确定上传</div>
					<p class="bottom_text">*请仔细核对，确认转账成功后再上传凭证。</p>
					<p class="bottom_text">上传造假凭证带来的一切后果皆由本人承担！</p>
				</div>
				<img class="clone" @click="shangShow = false" src="../../assets/components/close.png" alt="">
			</van-popup>
		</div>


		<!-- 查看收款码 -->
		<div class="upload_pingPop">
			<van-popup v-model="find_shoukuan">
				<div v-if="user_collectionInfo" class="upload_ping" style="border-radius: 0;padding: 0 .6rem;box-sizing: border-box;font-size: .26rem;">
					<p>卖家信息</p>
					<div style="display: flex;align-items: center;">
						<img style="margin-right: .35rem;width: .9rem;" :src="'http://www.facai888008.cn' + user_collectionInfo.seller.avatar"
						 alt="">
						<div>
							<p>ID：{{user_collectionInfo.seller.user_login}}</p>
							<p>等级：{{user_collectionInfo.seller.level}}</p>
						</div>
					</div>

					<p style="margin-top: .3rem;">联系方式：{{user_collectionInfo.seller.mobile}} <span @click="copy(user_collectionInfo.seller.mobile)" style="background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));color: #333;border-radius: 0.1rem;padding: 0 .15rem;">复制</span></p>
					<p style="margin-top: .3rem;display: flex;" @click="showPickerCollectionInfo = true">收款账户：
						<span style="display: flex;box-shadow:inset 0px 0px .2rem 0px rgba(28,176,212,1);border-radius: .1rem;padding: 0 .1rem;">
							{{collectionInfo_type}}
							<div style="margin-left: .1rem; width:.04rem; margin-top: .13rem; border: 0.1rem solid white;border-color: transparent;border-top-color: #94E9FF;"></div>
						</span></p>

					<div style="margin-top: .3rem;" v-if="collectionInfo_type == '支付宝'">
						<p>支付宝号：{{user_collectionInfo.alipay.sk_nums}}</p>

						<div style="display: flex;margin-top: .3rem;">
							<p style="margin-right: 0.15rem;">收款码：</p>
							<div style=" display: flex;flex-direction: column;align-items: center;">
								<img style="width: 1.5rem;height: 1.5rem;" :src=" 'http://www.facai888008.cn' + user_collectionInfo.alipay.sk_pic"
								 alt="">
								<span @click="downloadIamge(('http://www.facai888008.cn' + user_collectionInfo.wechat.sk_pic),'支付宝收款码.png')" style="margin-top: .1rem; font-size: .16rem; background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));color: #333;border-radius: 0.1rem;padding: 0 .15rem;">保存二维码</span>
							</div>
						</div>
					</div>

					<div style="margin-top: .3rem;" v-if="collectionInfo_type == '微信'">
						<p>微信号：{{user_collectionInfo.wechat.sk_nums}}</p>

						<div style="display: flex;margin-top: .3rem;">
							<p style="margin-right: 0.15rem;">收款码：</p>
							<div style=" display: flex;flex-direction: column;align-items: center;">
								<img style="width: 1.5rem;height: 1.5rem;" :src=" 'http://www.facai888008.cn' + user_collectionInfo.wechat.sk_pic"
								 alt="">
								<span @click="downloadIamge(('http://www.facai888008.cn' + user_collectionInfo.wechat.sk_pic),'微信收款码.png')" style="margin-top: .1rem; font-size: .16rem; background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));color: #333;border-radius: 0.1rem;padding: 0 .15rem;">保存二维码</span>
							</div>
						</div>
					</div>

					<div style="margin-top: .3rem;" v-if="collectionInfo_type == '银行卡'">
						<div style="display: flex;justify-content: space-between;">
							<p>账户名：{{user_collectionInfo.bank.sk_realname}}</p>
							<span @click="copy(user_collectionInfo.bank.sk_realname)" style="background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));color: #333;border-radius: 0.1rem;padding: 0 .15rem;">复制</span>
						</div>
						<div style="display: flex;justify-content: space-between;margin: .3rem 0;">
							<p>开户银行：{{user_collectionInfo.bank.sk_bank_name}}</p>
							<span @click="copy(user_collectionInfo.bank.sk_bank_name)" style="background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));color: #333;border-radius: 0.1rem;padding: 0 .15rem;">复制</span>
						</div>
						<div>
							<p>银行卡卡号：{{user_collectionInfo.bank.sk_nums}}</p>
							<span @click="copy(user_collectionInfo.bank.sk_nums)" style="background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));color: #333;border-radius: 0.1rem;padding: 0 .15rem;">复制</span>
						</div>
					</div>
				</div>
					
				<img class="clone" @click="find_shoukuan = false" src="../../assets/components/close.png" alt="">
			</van-popup>
		</div>

		<!--  收款方式切换 -->
		<van-popup v-model="showPickerCollectionInfo" position="bottom">
			<van-picker show-toolbar :columns="columns_type" @cancel="showPickerCollectionInfo = false" @confirm="selectType" />
		</van-popup>

		<InputPassword ref="InputPassword"></InputPassword>
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		Picker,
		Tab,
		Tabs,
		CountDown
	} from 'vant';

	Vue.use(Picker);
	Vue.use(Tab);
	Vue.use(Tabs);
	Vue.use(CountDown);

	import InputPassword from '../../components/InputPassword.vue'

	export default {
		name: "orderDetails",
		components: {
			InputPassword
		},
		created() {

			this.getDetails(1)

			this.getDetails(2)

		},
		data() {
			return {
				time: 60 * 1000,
				
				// 查看收款码类型
				columns_type: ['支付宝', '微信', '银行卡'],

				// 收款账户选择弹框
				showPickerCollectionInfo: false,

				// 用户收款方式切换
				collectionInfo_type: "支付宝",

				// 点击查看收款码存储的用户收款信息
				user_collectionInfo: "",

				// 查看收款码弹窗
				find_shoukuan: false,

				shangPZ_data: {
					id: "",
					url: "",
					index: ""
				},

				// 上传凭证弹窗
				shangShow: false,

				// 类别切换
				columns: ['出售', '购买'],

				// 类别切换弹窗
				showPicker: false,

				// 购买 出售列表切换
				type: "出售",

				// 出售订单详情列表切换下标
				sell_active: 0,

				// 购买订单详情列表
				buy_active: 0,

				// 出售订单详情
				sell_info: "",

				// 购买订单详情
				buy_info: "",
				
				// 待确认收款点击存储 凭证 和 id
				qr_data:{
					pz_pic:"",
					id:""
				},	
				
				// 待确认收款的查看凭证弹窗
				pingzheng: false,

				// 撤单拦截 防止连点
				chedan_status: true
			}
		},
		methods: {
			copy(text) {

				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', text);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$toast("成功复制到剪切板！")
				}
				document.body.removeChild(input);
			},

			// 选择收款方式
			selectType(value) {

				this.collectionInfo_type = value

				this.showPickerCollectionInfo = false
			},

			// 上传图片
			async upload(e) {

				this.$toast.loading({
					message: '上传中...',
					forbidClick: true,
					duration: 0
				});

				let img = e.target.files[0]

				let post_data = new FormData()

				post_data.append("file", img)

				try {

					const data = await this.$apis.User.uploadImg(post_data)

					// console.log(data)

					this.shangPZ_data.url = data.info

					this.$toast.clear()

				} catch (e) {
					//TODO handle the exception
					this.$toast.fail(e.msg)
				}

			},
			// 确认上传凭证
			async confirmPing() {

				if (this.shangPZ_data.url == "") return this.$toast("请上传凭证后操作");

				try {

					const data = await this.$apis.Common.orderPay(this.shangPZ_data)
					this.getDetails(1)
					this.getDetails(2)
					
					this.$toast(data.msg)

					this.buy_info.dfklist.splice(this.shangPZ_data.index, 1)

					setTimeout(() => {

						this.shangShow = false

					}, 700)

				} catch (e) {

					this.$toast(e.msg)
					//TODO handle the exception
				}


			},

			// 上传凭证遮罩层
			openShang(id, index) {

				this.shangShow = true

				this.shangPZ_data.id = id

				this.shangPZ_data.index = index
			},

			// 查看收款码 信息
			async openShou(id) {

				try {

					const data = await this.$apis.Common.orderinfo({
						id: id
					})

					this.user_collectionInfo = data.data

					// console.log(data)

					this.find_shoukuan = true


				} catch (e) {
					//TODO handle the exception
				}



			},
			// 撤销
			async cancelOrder(id, index) {

				if (!this.chedan_status) {
					return this.$toast("操作过于频繁");
				}

				this.chedan_status = false

				try {

					const data = await this.$apis.Common.cancelOrder({
						id: id
					})
					// this.sell_info.dpplist = 
					this.$toast(data.msg)

					this.sell_info.dpplist.splice(index, 1)

					setTimeout(() => {
						this.chedan_status = true
					}, 1500)

				} catch (e) {
					//TODO handle the exception
					this.$toast(e.msg)

					setTimeout(() => {
						this.chedan_status = true
					}, 1500)
				}

			},
			// 确认收款
			confirmCollection() {

				// console.log("this.$refs.InputPassword",this.$refs.InputPassword)

				this.$refs.InputPassword.open({
					methods: async () => {
						
						let post_data = {
							id:this.qr_data.id,
							jymm:this.$refs.InputPassword.passowrd
						}
						
						try{
							
							const data = await this.$apis.Common.sureorder(post_data)
							
							this.$toast(data.msg)
							this.pingzheng = false
							this.$refs.InputPassword.confirmShow = false
							this.$refs.InputPassword.showKeyboard = false
							
							this.sell_info.qrfklist.splice(this.qr_data,1)
							
							this.getDetails(1)
							
						}catch(e){
							
							e.pwd ? setTimeout( () => {this.$refs.InputPassword.passowrd = ''},1500) : ''
							
							this.$toast(e.msg)
							
							//TODO handle the exception
						}
						
					}
				})

			},

			// 查看凭证
			openFind(pic,id,index,type) {
				
				this.qr_data.pz_pic = pic
				
				this.qr_data.id = id
				
				this.qr_data.index = index
				
				this.qr_data.type = type
				
				this.pingzheng = true
			},

			async getDetails(type) {

				try {

					const data = await this.$apis.Common.orderList({
						type: type
					}) //1出售   2购买

					// console.log(data)

					type == 1 ? this.sell_info = data.data : this.buy_info = data.data

					// console.log(this.buy_info.dfklist.length)


				} catch (e) {
					//TODO handle the exception
				}

			},

			changeType() {
				this.showPicker = true
			},
			onConfirm(value) {

				if (value == '出售') {
					this.getDetails()
				} else {
					this.getDetails(2)
				}

				this.type = value
				this.showPicker = false
				console.log(value)
			},
			downloadIamge: function(imgsrc, name) {
			  let image = new Image();
			  image.setAttribute("crossOrigin", "anonymous");
			  image.onload = function() {
			    let canvas = document.createElement("canvas");
			    canvas.width = image.width;
			    canvas.height = image.height;
			    let context = canvas.getContext("2d");
			    context.drawImage(image, 0, 0, image.width, image.height);
			    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
			    let a = document.createElement("a"); // 生成一个a元素
			    let event = new MouseEvent("click"); // 创建一个单击事件
			    a.download = name || "photo"; // 设置图片名称
			    a.href = url; // 将生成的URL设置为a.href属性
			    a.dispatchEvent(event); // 触发a的单击事件
			  };
			  image.src = imgsrc;
			}
		},
		watch: {
			shangShow: function() {
				this.shangPZ_data.url = ""
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';

	.orderDetails {
		.van-count-down{
			color: white;
		}
		
		.upload_pingPop {

			.upload_btn {
				text-align: center;
				color: #0F2138;
				width: 2rem;
				height: .44rem;
				background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
				border-radius: .1rem;
				border-radius: .1rem;
				margin: auto;
				margin-top: .3rem;
				margin-bottom: .22rem;
			}

			.bottom_text {
				font-size: .22rem;
				margin: 0;
				text-align: center;
			}

			.upload_ping {
				color: #94E9FF;
				font-size: .32rem;
				width: 5.65rem;
				height: 8rem;
				background: rgb(19, 33, 58);
				box-shadow: inset 0px 0px .1rem 0px rgba(28, 176, 212, 1);
				border-radius: .2rem;

				.upload_div_img {
					width: 3.6rem;
					height: 4.8rem;
					border-radius: .15rem;
					display: block;
					margin: auto;
					object-fit: cover;
				}

				>p:nth-child(1) {
					text-align: center;
					padding-top: .39rem;
					margin-bottom: .25rem;
				}

				.upload_div {
					position: relative;
					padding: .3rem;
					box-sizing: border-box;
					margin: auto;
					width: 3.6rem;
					height: 4.8rem;
					border-radius: .15rem;
					border: 2px dashed rgb(24, 95, 123);

					img {
						width: .7rem;
						height: .7rem;
						display: block;
						margin: auto;
						margin-top: .3rem;
					}

					input {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						opacity: 0;
					}
				}
			}

			.clone {
				display: block;
				margin: auto;
				margin-top: .16rem;
			}

			/deep/ .van-popup {
				background-color: transparent;
			}
		}


		.chexiaoS {
			background: transparent !important;
			box-shadow: inset 0px 0px .1rem 0px rgba(28, 176, 212, 1);
			color: #94E9FF !important;
			margin-right: 0.04rem;
		}

		.find_PZ {
			padding-top: .39rem;
			box-sizing: border-box;
			color: #94E9FF;
			text-align: center;
			font-size: .32rem;
			width: 5.65rem;
			height: 6.78rem;
			background-color: rgb(15, 34, 60);
			box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);

			.title {
				margin-bottom: .39rem;
			}

			img {
				width: 4.8rem;
				height: 3.6rem;
				margin-bottom: .2rem;
			}

			>div {
				margin-bottom: .3rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 .45rem;
				color: #00FECA;
				font-size: .22rem;

				button {
					font-size: .3rem;
					width: 2rem;
					height: .44rem;
					background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
					border-radius: .1rem;
					color: #333;
					text-align: center;
					line-height: .44rem;
				}
			}

			.bottom {
				font-size: .24rem;
			}
		}

		.sell_dfk_item {
			padding: .4rem .4rem .27rem .35rem;
			box-sizing: border-box;
			border-bottom: 1px solid #1A304F;
			display: flex;
			justify-content: space-between;
			font-size: .24rem;

			.sdi_left {
				position: relative;

				div {
					position: absolute;
					width: 0.7rem;
					height: .35rem;
					background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
					border-radius: .1rem;
					color: #333;
					text-align: center;
					left: 50%;
					transform: translateX(-50%);
					top: 0.85rem;
				}
			}

			.sell_dpp_item {
				width: 5.37rem;
				border: none;
				padding: 0;
				padding-top: .24rem;

				>div:nth-child(1),
				>div:nth-child(3) {

					margin-bottom: .08rem;
				}

				>div:nth-child(2) {
					margin-top: 0rem;
				}

				.sdi_bottom {
					margin-top: .25rem;
				}

				.off {
					background: #8F959B;
					color: white;
				}

				.ysk {
					color: #00FECA;
				}
			}
		}

		.sell_dpp_item {
			border-bottom: 1px solid #1A304F;
			padding: .4rem .35rem;
			box-sizing: border-box;

			div {
				color: #94E9FF;
				font-size: .26rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			>div:nth-child(2) {
				margin-top: .27rem;
			}

			.chexiao {
				color: #333333;
				text-align: center;
				justify-content: center;
				padding: .02rem .15rem;
				background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
				border-radius: .1rem;
			}


		}

		/deep/ .van-tabs__nav--line {
			box-shadow: inset 0px 0px 10px 0px rgba(28, 176, 212, 1);
			padding-bottom: 0;
		}

		/deep/ .van-tabs__line {
			bottom: 0;
		}

		.type {
			color: white;
			display: flex;
			align-items: center;

			#sjx {
				border: .1rem solid white;
				border-color: transparent;
				border-top-color: white;
				margin-top: .1rem;
				margin-left: .1rem;
			}
		}
	}
</style>
